<template>
  <div class="container">
    <div class="title">快速入门</div>
    <div id="chart" />
  </div>
</template>

<script>
import G6 from '@antv/g6';

const data = {
  nodes: [
    {
      id:    'node1', // 唯一标识 用于连接线段的标识
      label: 'Circle1', // 文字部分
      x:     150,
      y:     150, // x 和 y 表示节点的位置
      type:  'ellipse',
    },
    {
      id:         'node2',
      label:      'Circle2',
      x:          400,
      y:          150,
      linkPoints: {
        top:    true,
        bottom: true,
        left:   true,
        right:  true,
      },
    },
  ],
  edges: [
    {
      source: 'node1',
      target: 'node2',
    },
  ],
};

export default {
  name: 'QuickStart',
  data() {
    return { graph: null };
  },
  mounted() {
    this.createGraph();
  },
  methods: {
    createGraph() {
      const graph = new G6.Graph({
        container:   'chart',
        width:       window.innerWidth,
        height:      500,
        defaultEdge: {
          style: {
            stroke: 'orange', // 线的颜色
          },
        },
        defaultNode: {
          type:  'circle',
          size:  [100],
          color: 'red', // 边框颜色
          style: {
            fill:      'pink', // 填充色
            lineWidth: 6, // 边框宽度
            stroke:    'blue',
          },
          labelCfg: {
            style: {
              fill:     'white',
              fontSize: 16,
            },
          },
        },
        modes: {
          default: ['drag-node', 'drag-edge'],
        },
        fitCenter:  true,
        linkCenter: true,
      });

      graph.data(data); // 加载数据
      graph.render(); // 渲染
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  .title {
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: white;
    font-weight: bold;
  }
}
</style>
